<template>
  <div>
    <V-CommonHeaderLeft>
      <div id="app">
        <el-row>
          <!-- 头部 -->
          <div class="header">
            <el-col :span="3" class="header-nav">
              <router-link to="/">首页&nbsp;&nbsp;/</router-link>
              <router-link to="/">客户&nbsp;&nbsp;/</router-link>
              <router-link to="/">搜索日志</router-link>
            </el-col>
            <el-col :span="1" :offset="20" class="header-img">
              <!-- <img src="" alt=""> -->
            </el-col>
          </div>
        </el-row>
        <div class="contents">
          <el-tabs v-model="activeName" class="elTabs">
            <el-tab-pane label="搜索明细" name="first">
              <div id="searchMing">
                <input type="search" name id placeholder="请输入搜索内容" class="searchMing-input">
                <el-date-picker
                  v-model="value2"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="~"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions"
                  class="dataSelect"
                ></el-date-picker>
                <el-table
                  :data="tableData"
                  style="width: 100%;"
                  :default-sort="{prop: 'date', order: 'descending'}"
                  class="tableData"
                >
                  <el-table-column prop="content" label="搜索内容"></el-table-column>
                  <el-table-column prop="time" label="所搜时间"></el-table-column>
                  <el-table-column prop="name" label="客户名称"></el-table-column>
                  <el-table-column prop="jieguo" label="搜索结果" sortable></el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="搜索统计" name="second">
              <div id="searchMing">
                <input type="search" name id placeholder="请输入搜索内容" class="searchMing-input">
                <el-table
                  :data="tableData"
                  style="width: 100%;"
                  :default-sort="{prop: 'date', order: 'descending'}"
                  class="tableData"
                >
                  <el-table-column prop="content" label="搜索内容"></el-table-column>
                  <el-table-column prop="time" label="所搜时间"></el-table-column>
                  <el-table-column prop="name" label="客户名称"></el-table-column>
                  <el-table-column prop="jieguo" label="搜索结果" sortable></el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
export default {
  components: {
    VCommonHeaderLeft
  },
  data () {
    return {
      activeName: 'first',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value1: '',
      value2: '',
      // 数据
      tableData: [{
        content: 'Hair',
        time: '2019-05-22 21:35:48',
        name: '上海市普陀区金沙江路 1518 弄',
        jieguo: 1
      }]
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  background-color: #f2f5f7;
  width: 100%;
  padding: 15px 10px 0px 10px;
  .header {
    height: 45px;
    .header-nav {
      line-height: 30px;
      font-size: 12px;
      display: flex;
      justify-content: space-around;
      padding-left: 10px;
      span {
        display: inline-block;
        margin-left: 10px;
      }
      a {
        color: #999999;
      }
      a:hover {
        color: #20ade5;
      }
    }
    .header-img {
      width: 25px;
      height: 25px;
      border-radius: 5px;
      border: 1px solid #dce4e7;
    }
  }
}
.header-nav > a:last-child {
  color: #333 !important;
}
.header-nav > a:last-child:hover {
  color: #333;
}
.contents {
  background-color: #fff;
  height: 500px;
  padding: 15px 0px 0px 0px;
}
.searchMing-input {
  width: 240px;
  border: 1px solid #e3e3e3;
  height: 40px;
  text-indent: 1em;
  margin-left: 20px;
  border-radius: 5px;
}
.searchMing-input:hover {
  border-color: #20ade5;
}
.searchMing-input::placeholder {
  color: #b3b3b3;
  font-size: 12px;
}
.elTabs /deep/ .el-tabs__item {
  width: 105px;
  text-align: center;
  font-size: 16px;
}
.dataSelect {
  margin-left: 15px;
}
.dataSelect /deep/ ::placeholder {
  font-size: 12px;
}
.tableData {
  margin-top:20px;
  font-size:12px
}
.tableData /deep/ th {
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
  font-size: 12px;
  font-weight: normal;
  height: 20px;
  background-color: #fcfcfc;
  color: #666;
}
</style>
